<template>
    <div class="main">
        <el-row :gutter="20">
            <el-col :span="24" :offset="0">
                <el-form  ref="form"  label-width="80px" :inline="true" size="mini">
                    <el-form-item label="标题">
                        <el-input v-model="title"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="mySearch">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-document-add" @click="toAddNews">添加新闻</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-table :data="pageInfo.list" size="mini" stripe row-key="nid">
                <el-table-column prop="ntitle" label="标题" width="400"></el-table-column>
                <el-table-column prop="nauthor" label="作者" width="100"></el-table-column>
                <el-table-column prop="ncreatedate" label="标题"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                    <el-button type="warning" size="mini" icon="el-icon-edit" circle @click="activeEdit(scope.$index,scope.row.nid)"></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="activeDel(scope.$index,scope.row.nid)"></el-button>
                        <!-- <template>
                            <el-popconfirm
                                title=""
                                confirmButtonText=""
                                cancelButtonText=""
                                confirmButtonType="primary"
                                cancelButtonType="text"
                                icon="el-icon-question"
                                iconColor="#f90"
                                hideIcon="false">
                                <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete" circle=""></el-button>
                            </el-popconfirm>
                        </template> -->
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24" :offset="0">
                <el-pagination background layout="prev, pager, next,total" small
                :total="pageInfo.total"
                :current-page="pageInfo.pageNum"
                :page-count="pageInfo.pages"
                :page-size="pageInfo.pageSize"
                @current-change="currentChange"></el-pagination>
            </el-col>
        </el-row>
        <router-view></router-view>
    </div>
    
</template>

<script>
export default {
    name:'NewsManager',
    data(){
        return {
            pageInfo:{},
            pageNum:1,
            pageSize:6,
            title:''
        }
    },
    created(){
        this.searchNews()
    },
    methods:{
        searchNews(){
            this.$axios({
                url:'/api/newsByPage',
                params:{
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                    title:this.title
                }
            }).then(rs=>{
                this.pageInfo=rs.data.data
            })
        },
        currentChange(pageNum){
            this.pageNum = pageNum
        },
        mySearch(){
            if(this.pageNum ===1){
                this.searchNews()
            }else{
                this.pageNum = 1
            }
        },
        toAddNews(){
            this.$router.push({path:'/newsAdd'},()=>{})
        },
        activeEdit(index,nid){
            this.$router.push({
                name:'NewsEdit',
                query:{
                    nid
                }
            })
        },
        activeDel(index,nid){
            this.$confirm('确认删除？','提示').then(()=>{
                this.$axios({
                    url:'/api/delNews',
                    params:{
                        nid
                    }
                }).then(rs=>{
                    if(rs.data.data){
                        this.$message.success('新闻删除成功')
                        this.searchNews()
                    }else{
                        this.$message.error('新闻删除失败')
                    }
                })
            }).catch(()=>{}) //必须要加一个catch方法用于处理取消按钮的操作，否则报错
        }
    },
    watch:{
        pageNum(){
             this.searchNews()
        }
    }
}
</script>

<style>

</style>